/*
 * @Author       : 魏威 <1209562577@qq.com>
 * @Date         : 2022-06-27 14:31 周1
 * @Description  : 示例02
 */
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import { Button, Form, Input } from 'antd'

import React, { useState } from 'react'

interface FieldData {
  name: string | number | (string | number)[]
  value?: any
  touched?: boolean
  validating?: boolean
  errors?: string[]
}

export default function example02() {
  const [fields, setFields] = useState<FieldData[]>([])

  const onFinish = (values: any) => {
    console.log('Received values of form:', values)
  }

  return (
    <div>
      <Form
        onFinish={onFinish}
        onValuesChange={(changeValue, allValues) => {
          console.log('values: ', allValues)
        }}
      >
        <Form.List name='assitLine'>
          {(fields, { add, remove }) => {
            return (
              <>
                {fields.map((field) => (
                  <section key={field.name}>
                    <Form.Item label={'辅助线名字'} name={[field.name, 'name']}>
                      <Input />
                    </Form.Item>
                    <Form.Item
                      label={'计算方式'}
                      name={[field.name, 'computeStyle']}
                    >
                      <Input />
                    </Form.Item>
                    <Form.Item label={'系列'} name={[field.name, 'series']}>
                      <Input />
                    </Form.Item>
                    <MinusCircleOutlined onClick={() => remove(field.name)} />
                  </section>
                ))}
                <Form.Item>
                  <Button
                    type='dashed'
                    onClick={() => add()}
                    block
                    icon={<PlusOutlined />}
                  >
                    Add sights
                  </Button>
                </Form.Item>
              </>
            )
          }}
        </Form.List>
        <Form.Item>
          <Button type='primary' htmlType='submit'>
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
